﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.Appointments.TimeIntervals.IndexModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "预约时段";
}
@section styles
{
    <abp-style src="/Pages/Appointments/TimeIntervals/Index.css"></abp-style>
}
@section scripts
{
    <abp-script src="/Pages/Appointments/TimeIntervals/Index.cshtml.js"></abp-script>
}
<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span>{{department?department.name:''}}-{{deviceType?deviceType.name:''}}-{{schedule?schedule.name:''}}</span>
            </div>
        </div>
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="showCreate" icon="el-icon-plus" size="mini" v-if="timeIntervalCreatePermission">新建</el-button>
                    <el-input v-model.trim="filterName" placeholder="用户名" size="mini" style="width:300px;margin-left:10px" clearable></el-input>
                    <el-button type="primary" v-on:click="search" icon="el-icon-search" size="mini">搜索</el-button>
                    <el-button v-on:click="deleteMany" icon="el-icon-delete" size="mini" v-if="timeIntervalDeletePermission">删除</el-button>
                    <el-button v-on:click="showBatchCreate" icon="fa fa-wand-magic-sparkles" size="mini">批量生成时段</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="search" icon="el-icon-refresh" size="mini"></el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="table-container">
                <el-table :data="tableData" empty-text="暂无预约时段" height="100" size="mini" class="el-table" row-key="id" ref="scheduleTable" v-show="department && deviceType" v-on:selection-change="selectedRowsChange">
                    <el-table-column type="selection" width="50" v-if="timeIntervalDeletePermission" >

                    </el-table-column>
                    <el-table-column type="index"  v-if="!timeIntervalDeletePermission">

                    </el-table-column>
                    <el-table-column label="名称" property="name" >

                    </el-table-column>
                    <el-table-column label="编码" property="code">

                    </el-table-column>
                    <el-table-column label="开始时间" property="startTime" sortable>
                        
                    </el-table-column>
                    <el-table-column label="结束时间" property="endTime" sortable>
                        
                    </el-table-column>
                    <el-table-column label="顺序" width="80" property="order" sortable>

                    </el-table-column>
                    <el-table-column width="80" label="活动">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive" v-on:change="disableToggle(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" property="type">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" v-on:click="showEdit(scope.row.id)" v-if="timeIntervalEditPermission"></el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" v-on:click="deleteTimeInterval(scope.row.id)" v-if="timeIntervalDeletePermission"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-show="department && deviceType"
                               v-on:size-change="pageSizeChange"
                               v-on:current-change="currentPageChange"
                               :current-page="currentPage"
                               :page-sizes="[10, 15, 20, 30,40,50,100]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="totalCount">
                </el-pagination>
            </div>
        </div>

        <!--创建与编辑对话框-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" v-on:close="resetForm" :close-on-click-modal="false">
            <el-form :model="timeInterval" :label-width="formLabelWidth" ref="dialogForm" :rules="rules">
                <el-row>
                    <el-col :span="24" >
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model.trim="timeInterval.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="编码">
                                <el-input v-model.trim="timeInterval.code" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="开始时间" prop="startTime">
                                <el-time-select v-model="timeInterval.startTime"
                                                size="mini"
                                                clearable
                                                :picker-options=" {
                                                    start: '5:00',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a'
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="startTimeChange"
                                                placeholder="开始时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="结束时间" prop="endTime">
                                <el-time-select v-model="timeInterval.endTime"
                                                size="mini"
                                                :picker-options="{
                                                    start: '5:30',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a',
                                                    minTime:timeInterval.startTime
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="endTimeChange"
                                                clearable
                                                editable
                                                placeholder="结束时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="顺序" prop="order">
                                <el-input type="number" step="1" v-model="timeInterval.order" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="timeInterval.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="save" size="mini">保存</el-button>
                <el-button v-on:click="resetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>

        <!--批量创建-->
        <el-dialog title="批量生成时段" :visible.sync="batchCreatVisible" width="600px" v-on:close="resetBatchForm" :close-on-click-modal="false">
            <el-form :model="batchModel" label-width="100px" ref="batchForm" :rules="batchRules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="开始时间" prop="startTime">
                                <el-time-select v-model="batchModel.startTime"
                                                size="mini" 
                                                clearable 
                                                editable 
                                                :picker-options=" {
                                                    start: '5:00',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a'
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="batchStartTimeChange"
                                                placeholder="开始时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="结束时间" prop="endTime">
                                <el-time-select v-model="batchModel.endTime"
                                                size="mini"
                                                :picker-options=" {
                                                    start: '5:30',
                                                    step:'00:30',
                                                    end:'21:30',
                                                    format: 'HH:mm a',
                                                    minTime:batchModel.startTime
                                                }"
                                                :value-format="valueFormat"
                                                v-on:change="batchEndTimeChange"
                                                clearable
                                                editable
                                                placeholder="结束时间">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="间隔(分钟)" prop="interval">
                                <el-select v-model="batchModel.interval" size="mini" style="width:100%;" placeholder="请选择">
                                    <el-option v-for="item in batchModel.options"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="batchCreate" size="mini">确定</el-button>
                <el-button v-on:click="resetBatchForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>
